<template>
  <p>Event List, onMounted中异步, .value更新</p>

  <div v-for="item in data">
    <router-link :to="`/event/${item.id}`">{{ item.id }}</router-link>
  </div>
</template>

<script>
import axios from 'axios'
import {onMounted, ref} from 'vue'
import { effect } from "@vue/reactivity"

export default {
  name: "EventList",
  setup() {
    let data = ref([])
    onMounted(async() => {
      const res = await axios.get('events/')
      res.data.map(e => data.value.push(e)) ;
      data.value.push({id: 'error'})
    })
    return {data}
  },
}
</script>
